<template>
  <div class="password-view" v-loading="loading">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item :label="$t('global.old_password')" prop="oldPassword">
        <el-input v-model="ruleForm.oldPassword" :placeholder="$t('global.old_password')" type="password"></el-input>
      </el-form-item>
      <el-form-item :label="$t('global.new_password')" prop="newPassword">
        <el-input v-model="ruleForm.newPassword" :placeholder="$t('global.new_password')" type="password"></el-input>
      </el-form-item>
      <el-form-item :label="$t('tables_title.repeat_password')" prop="password2">
        <el-input v-model="ruleForm.password2" :placeholder="$t('tables_title.repeat_password')" type="password"> </el-input>
      </el-form-item>
      <div style="text-align: center">
        <el-button type="primary" @click="submitForm('ruleForm')">{{ $t('global.submit') }}</el-button>
        <el-button @click="cancelView">{{ $t('global.cancel') }}</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import { changePwd } from '@/api/userApi.js'

export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('user_management.pwd_again')))
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error(this.$t('user_management.pwd_inconsistent')))
      } else {
        callback()
      }
    }
    return {
      loading: false,
      ruleForm: {
        oldPassword: '',
        newPassword: '',
        password2: '',
      },
      rules: {
        oldPassword: [
          {
            required: true,
            message: this.$t('global.empty_old_pwd'),
            trigger: 'blur',
          },
          {
            min: 6,
            max: 14,
            message: this.$t('user_management.pwd_condition'),
            trigger: 'blur',
          },
        ],
        newPassword: [
          {
            required: true,
            message: this.$t('global.empty_new_pwd'),
            trigger: 'blur',
          },
          {
            min: 6,
            max: 14,
            message: this.$t('user_management.pwd_condition'),
            trigger: 'blur',
          },
        ],
        password2: [
          {
            required: true,
            validator: validatePass,
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          let formData = new FormData()
          formData.append('oldPassword ', this.ruleForm.oldPassword)
          formData.append('newPassword', this.ruleForm.newPassword)
          changePwd(formData).then((res) => {
            this.loading = false
            console.log(res)
            if (res.data.code == 200) {
              this.$message({
                message: this.$t('global.modified_success'),
                type: 'success',
              })
              this.cancelView()
            } else {
              this.$message.error(res.data.message)
            }
          })
        } else {
          return false
        }
      })
    },
    cancelView() {
      this.$emit('cancelView')
    },
  },
}
</script>

<style lang="scss" scoped>
.password-view {
  width: 100%;
  box-sizing: border-box;
  padding: 0 30px;
}
</style>
